<template>
  <section class="scrollbox">
     <div class="aps8 container">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-card style="min-width: 306px;margin-bottom: 20px;height: 253px;">
                <div class="f16 approve_container">
                  <span class="font-gray">欢迎您,</span>
                  <span class="name">{{userName}}</span>
                  <div class="approve_img">
                    <router-link :to="{name:'user'}">
                      <span class="approve r12 id_card" :class="{approved:userInfo.idcardrz == 1}" title="账户信息"></span>
                    </router-link>
                    <router-link :to="{name:'Safe'}">
                      <span class="approve r12 mobile" :class="{approved:userInfo.mobilerz == 1}" title="手机信息"></span>
                    </router-link>
                    <router-link :to="{name:'Safe'}">
                      <span class="approve email" :class="{approved:userInfo.emailrz == 1}" title="邮箱认证"></span>
                    </router-link>
                  </div>
                </div>
                <!--<div class="bt12">-->
                  <!--会员等级: 注册会员-->
                <!--</div>-->
                <div class="bt12">
                  安全等级:
                  <span class="font-red" v-if="userInfo.idcardrz == 0">低</span>
                  <span class="font-green" v-if="userInfo.idcardrz == 1">高</span>
                </div>
                <ul class="detail_container">
                  <router-link :to="{name:'user'}">
                    <li class="detail_box font-gray">账号信息</li>
                  </router-link>
                  <router-link :to="{name:'Safe'}">
                    <li class="detail_box font-gray">安全设置</li>
                  </router-link>
                  <router-link :to="{name:'VmOrder'}">
                    <li class="detail_box font-gray border_r">订单管理</li>
                  </router-link>
                </ul>
            </el-card>
          </el-col>
          <el-col  :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-card style="min-width: 306px;margin-bottom: 20px;height: 253px;">
              <div class="f16 approve_container font-gray">
                账户概览
              </div>
              <div class="balance_container">
                <el-row>
                  <el-col :span="12">
                    <div class="balance_label font-gray">
                      可用余额
                    </div>
                    <span class="font-red balance"><span style="font-size: 12px">￥ </span>{{userInfo.balance}}</span>
                  </el-col>
                  <!--<el-col :span="12">-->
                    <!--<div class="cash pl20">-->
                      <!--可用代金券(元)-->
                    <!--</div>-->
                    <!--<span class="balance pl20">153454</span>-->
                  <!--</el-col>-->
                </el-row>
              </div>
              <ul class="link_recharge_container">
                <li class="recharge_btn">
                  <router-link :to="{name:'Recharge'}" class="font-white">
                    充值
                  </router-link>
                </li>
                <li class="pl20">
                  <router-link :to="{name:'RechargeOrderList'}" class="font-blue">
                    充值记录
                  </router-link>
                </li>
                <li class="pl20">
                  <router-link :to="{name:'BalanceLog'}" class="font-blue">
                    交易记录
                  </router-link>
                </li>
              </ul>

            </el-card>
          </el-col>
          <el-col  :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-card style="min-width: 306px;margin-bottom: 20px;">
              <div class="f16 approve_container font-gray">
                待办事项
              </div>
              <div>
                <ul class="backlog">
                  <li class="backlog_num">
                    {{countInfo.renew_instance}}
                  </li>
                  <li>
                    待发货 
                  </li>
                  <router-link :to="{name: 'VmList'}">
                    <li class="backlog_a">
                      前往发货
                    </li>
                  </router-link>
                </ul>
                <ul class="backlog">
                  <li class="backlog_num">
                    {{countInfo.unpay_order}}
                  </li>
                  <li>
                    待审核素材
                  </li>
                  <router-link :to="{name: 'VmOrder'}">
                    <li class="backlog_a">
                      前往支付
                    </li>
                  </router-link>
                </ul>
                <ul class="backlog">
                  <li class="backlog_num">
                    0
                  </li>
                  <li>
                    待审核账户
                  </li>
                  <li class="backlog_a">
                    前往处理
                  </li>
                </ul>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
            <el-card>
              <div class="font-gray f16 bt12">
                素材
              </div>
              <el-row style="margin-bottom: 9px;">
                <el-col :span="12">
                  <router-link :to="{name: 'VmList'}">
                    <div class="cloud_container">
                      <div class="cloud_circle font-blue">
                        {{countInfo.instance}}个
                      </div>
                      <span class="font-blue">视频</span>
                    </div>
                  </router-link>
                </el-col>
                <el-col :span="12">
                  <div class="cloud_container">
                    <div class="cloud_circle font-red">
                      0个
                    </div>
                    <span class="font-blue">图片</span>
                  </div>
                </el-col>
              </el-row>
              <div class="dis60"></div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-card style="min-width: 306px;margin-bottom: 20px;">
              <div class="font-gray f16 bt12">
                客服
              </div>
              <ul class="service_ul">
                <li class="service_li service_mr">
                  <img src="../../../../assets/console/index/beian.png" alt="">
                  <span>素材相关</span>
                </li>
                <li class="service_li">
                  <img src="../../../../assets/console/index/whitelist.png" alt="">
                  <span>账户审核</span>
                </li>
                <li class="service_li service_mr">
                  <img src="../../../../assets/console/index/invoice.png" alt="">
                  <span>财务发票</span>
                </li>
                <li class="service_li">
                  <img src="../../../../assets/console/index/service.png" alt="">
                  0000-000-000
                </li>
              </ul>
            </el-card>
          </el-col>
        </el-row>
     </div>
  </section>
</template>
<script>
  import {  cacheUserinfo } from '@cache'
  export default {
//      name: 'main',
      data() {
          return {
            userInfo: {},
            userName: '',
            countInfo: {
              renew_instance: '',
              unpay_order: '',
              instance: ''
            }
          }
      },
      methods: {
        //获取用户信息
        getUserInfo () {
          this.$api.get("user.get_userinfo").then(res => {
            if (res.status === 1) {
              this.purview = res.data.purview
              this.userInfo = res.data
              this.userName = res.data.realname || res.data.uname || res.data.email || res.data.mobile
              cache.set("purview", this.purview)
              cacheUserinfo.save(res.data)
            }
          })
        },
        getCfg () {
          this.$api.get("admin.get_cfg").then(res=>{
            if(res.status==1){
              cacheConfig.save(res.data)
            }
          }).catch(()=>{

          })
        }
      },
      mounted () {
      }
  }
</script>
<style scoped lang="scss">
  .r12{
    margin-right: 12px;
  }
  .bt12{
    margin-bottom: 12px;
  }
  .bt24{
    margin-bottom: 24px;
  }
  .border_r{
    border-right: 1px solid #f3f4f5;
  }
  .pl20{
    padding-left: 20px;
  }

  .container{
    padding: 30px 0;
  }
  .name{
    margin-right: 17px;
  }
  .approve_container{
    margin-bottom: 40px;
  }
  .approve_img{
    display: inline-block;
    vertical-align: middle;
  }
  .approve{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
  .approved{
    background-position: center top;
  }
  .id_card{
    background-image: url("../../../../assets/console/index/idcard.png");
  }
  .mobile{
    background-image: url("../../../../assets/console/index/mobile.png");
  }
  .email{
    background-image: url("../../../../assets/console/index/email.png");
  }
  .detail_container{
    margin-bottom: 33px;
  }
  .detail_box{
    display: inline-block;
    padding: 10px 18px;
    border-left: 1px solid #f3f4f5;
  }
  .balance_container{
    margin-bottom: 40px;
  }
  .balance_label{
    height: 32px;
    /*border-right: 1px solid #f3f4f5;*/
  }
  .balance{
    font-size: 22px;
  }
  .cash{
    height: 32px;
  }
  .link_recharge_container{
    margin-bottom:24px;
    li{
      display: inline-block;
      height: 24px;
      line-height: 24px;
    }
    .recharge_btn{
      padding: 0 16px;
      background-color: #0af;
      color: #fff;
    }
  }
  .backlog{
    padding-left: 14px;
    padding-right: 30px;
    background-color: #f7f9fa;
    height: 44px;
    margin-bottom: 6px;
    line-height: 44px;
    li{
      display: inline-block;
    }
  }
  .backlog_num{
    width: 24px;
    text-align: left;
    font-size: 16px;
    color: #000;
  }
  .backlog_a{
    color: #2eb8fd;
    float: right;
  }
  .cloud_container{
    width: 130px;
    margin: 0 auto;
    text-align: center;
  }
  .cloud_circle{
    width: 130px;
    height: 130px;
    line-height: 130px;
    border-radius: 50%;
    background-color: #f7f9fa;
    text-align: center;
    margin-bottom: 16px;
    font-size: 23px;
  }
  .cloud_container:hover .cloud_circle{
    background-color: #eef0f1;
  }
  .service_ul:after{
      display:block;
      clear:both;
      content:""; visibility:
      hidden;height:0
    }

  .service_li{
    float: left;
    width: 48%;
    height: 43px;
    line-height: 43px;
    margin-bottom: 14px;
    background-color: #f7f9fa;
    img{
      margin: 0 6px 0 12px;
    }
  }
  .service_li_number{
    height: 43px;
    line-height: 43px;
    width: calc(100% - 62px);
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
  .service_li:hover{
    box-shadow: 1px 1px 10px 1px #d6d6d6;
    color: #00aaff;
  }
  .service_mr{
    margin-right: 3%;
  }
  .product_container:after{
    display:block;
    clear:both;
    content:""; visibility:
    hidden;height:0
  }
  .product_ul{
    width: 31%;
    float: left;
    border: 1px solid #dcdcdc;
    margin-bottom: 20px;
    overflow:hidden;
    li{
      float: left;
    }
  }
  .product_img{
    width: 82px;
    height: 82px;
    background-color: #f7f9fa;
    border-right: 1px solid #dcdcdc;
    background-repeat: no-repeat;
    background-position: top;
  }
  .product_ul:hover{
    box-shadow: 1px 1px 10px 1px #d6d6d6;
    .product_img{
      background-position: center -84px;
    }
  }
  .product_img1{
    background-image: url("../../../../assets/console/index/service_b.png");
  }
  .product_img2{
    background-image: url("../../../../assets/console/index/ddos_b.png");
  }
  .product_img3{
    background-image: url("../../../../assets/console/index/zy_b.png");
  }
  .product_img4{
    background-image: url("../../../../assets/console/index/tg_b.png");
  }
  .product_img5{
    background-image: url("../../../../assets/console/index/jg_b.png");
  }
  .product_img6{
    background-image: url("../../../../assets/console/index/ddk_b.png");
  }
  .product_mr{
    margin-right: 3%;
  }
  .product_content{
    width: calc(100% - 82px);
    padding: 22px 0 0 18px;
  }
  .product_text{
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 4px;
  }

  .find_more{
    float: right;
    font-size: 12px;
  }
  .notice_container{
    height: 50px;
    line-height: 50px;
    display: block;
    width: 100%;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px dashed #e3e5e5;
  }
  .notice_border{
    border-top: 1px dashed #e3e5e5;
  }
  .notice_container:hover{
    background-color: #edf7fc;
  }
  .time{
    margin-right: 4px;
  }
  .time:before{
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid #0caeff;
    margin-right: 12px;
    margin-left: 4px;
  }
</style>
